<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':'修改')}}关联地块信息</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->

                <div id="form" :data-options="JSON.stringify({'tableName':'planting_people','formName':'dataForm' ,'primaryKey':'Planting_People_SerialNumber'})">
                    <div :data-options="JSON.stringify({'tableName':'planting_people_mapping_land','formName':'childDataForm' ,'parentTableName':'planting_people'})"></div>
                </div>


                <div class="table_titel">
                    <div class="titel">种植人信息</div>
                </div>

                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="1" size="large" border>

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">种植人姓名</div>
                            </template>
                            <el-form-item prop="Planting_People_Name" :rules="[{ required: true, message: '请输入种植人姓名', trigger: 'blur' }]">
                                <!-- <el-input v-model.trim="dataForm.Planting_People_Name" placeholder="请输入种植人姓名" /> -->
                                {{dataForm.Planting_People_Name}}
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">身份证号</div>
                            </template>
                            <el-form-item prop="ID_Card_Number" :rules="[{ required: true, message: '请输入身份证号', trigger: 'blur' }]">
                                <!-- <el-input v-model.trim="dataForm.ID_Card_Number" placeholder="请输入身份证号" /> -->
                                {{dataForm.ID_Card_Number}}
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">所属基地</div>
                            </template>
                            <el-form-item prop="Traceability_Base_SerialNumber" :rules="[{ required: true, message: '请输入所属基地', trigger: 'blur' }]">
                                <!-- <el-input v-model.trim="dataForm.Traceability_Base_SerialNumber" placeholder="请输入所属基地" /> -->
                                {{dataForm.Traceability_Base_SerialNumber}}
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">联系电话</div>
                            </template>
                            <el-form-item prop="Contact_Phone" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
                                <!-- <el-input v-model.trim="dataForm.Contact_Phone" placeholder="请输入联系电话" /> -->
                                {{dataForm.Contact_Phone}}
                            </el-form-item>
                        </el-descriptions-item>

                    </el-descriptions>
                </el-form>

                <div class="table_titel">
                    <div class="titel">地块信息</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>

                <el-form :model="{childDataForm:childDataForm.filter(i=>i.Row_Status != '1')}" ref="childForm"
                    :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border
                        v-for="(item,index) in childDataForm.filter(i=>i.Row_Status != '1')" :key="index">
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">负责地块</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Land_SerialNumber`" 
                                :rules="[{ required: true, message: '请输入负责地块', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Land_SerialNumber" placeholder="请输入负责地块" />
                            </el-form-item>
                        </el-descriptions-item>

                       

                    </el-descriptions>
                </el-form>


            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add_land.js"></script>
</body>

</html>